<template>
  <div class="index-videos q-pa-md">
    <template v-for="(video, index) in videos">
      <template v-if="index==0 || index==4 || index==6">
        <large-video-card class="video-card" :video="video" :key="video.id" />
      </template>
      <template v-else>
        <small-video-card class="video-card" :video="video" :key="video.id" />
      </template>
    </template>
  </div>
  <slot name="append" />
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import LargeVideoCard from 'components/video/LargeVideoCard.vue';
import SmallVideoCard from 'components/video/SmallVideoCard.vue';
import Video from 'src/models/Video';
export default defineComponent({
  props: {
    videos: {
      type: Array as PropType<Video[]>,
      required: true,
      default: () => [],
    },
  },
  components: {
    LargeVideoCard,
    SmallVideoCard,
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss">
.index-videos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 0.15fr 0.15fr 1fr;
  grid-gap: 1em;
  grid-auto-flow: column dense;
  .video-card:nth-child(1),
  .video-card:nth-child(5),
  .video-card:nth-child(7) {
    grid-column: auto / span 2;
    grid-row: auto / span 3;
  }
}
</style>